<template>
    <div class="ff-screen" :class="section? 'ff-screen-no-border' : ''">
        <label class="ff-screen-title" :class="section? 'ff-screen-section-title' : ''">{{title}}：</label>
        <div class="ff-screen-options" v-if="!section">
            <div
                class="ff-screen-options-list"
                :class="[more ? 'options-list-more' : 'options-list-fixed',
                    multiple? 'options-list-multiple' : 'options-list-radio'
                ]"
            >
                <ul>
                    <li v-for="item in currentOptions" :key="item.id">
                        <label :class="item.checked ? 'ff-screen-checked' : ''" @click="handleRadioClick(item)">
                            <input v-if="multiple" type="checkbox" v-model="item.multChecked" />
                            {{ item.ENAME }}
                        </label>
                    </li>
                </ul>
                <div v-if="multiple" class="ff-screen-bottom-button">
                    <button @click="linkChecked" class="ff-screen-bottom-btn">确定</button>
                    <button @click="toggleCheck(false)" class="ff-screen-bottom-btn">取消</button>
                </div>
            </div>
            <div class="ff-screen-operate-btn">
                <span v-if="!multiple" @click="toggleCheck"><i class="iconfont icon-jia"></i>多选</span>
                <span @click="toggleMore"><i class="iconfont" :class="more ? 'icon-shangjiantou' : 'icon-jiantou'"></i>更多</span>
            </div>
        </div>
        <div class="ff-screen-section" v-if="section">
            <div class="ff-screen-section--box">
                <span>￥</span>
                <input
                    type="text"
                    class="ff-screen-section-input"
                    @change="sectionChange($event, 0)"
                />
            </div>
            <span class="ff-screen-section-divide"></span>
            <div class="ff-screen-section--box">
                <span>￥</span>
                <input
                    type="text"
                    class="ff-screen-section-input"
                    @change="sectionChange($event, 1)"
                />
            </div>
            <button class="ff-screen-bottom-btn" @click="sectionConfirm">确定</button>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'FfScreen',
        props: {
            title: {
                type: String,
                default: ''
            },//筛选大类名称
            options: {
                type: Array,
                default: () => [],
            },//整个大类数据
            code: {
                type: String,
                default: ''
            },//字段名称
            section: {
                type: Boolean,
                default: false
            }//是否显示区间
        },
        data() {
            return {
                currentOptions: this.options,
                multiple: false,//true(多选)/false(单选)
                more: false,
            }
        },
        methods: {
            /*单个点击选择*/
            handleRadioClick (obj) {
                const _self = this;
                if(!_self.multiple) {
                    if(obj.checked) _self.currentOptions.some(item => _self.$set(item, 'checked', false));
                    else {
                        _self.currentOptions.some(item => _self.$set(item, 'checked', false));
                        _self.$set(obj, 'checked', true);
                    }
                    _self.$emit('confirm', _self.code, _self.currentOptions);
                }
            },
            /*多选值*/
            linkChecked () {
                const _self = this;
                for(let option of _self.currentOptions) {
                    _self.$set(option, 'checked', option.multChecked);
                }
                _self.toggleCheck(false, true);
                _self.$emit('confirm', _self.code, _self.currentOptions);
            },
            /*取消多选并还原*/
            toggleCheck(status, more) {
                const _self = this;
                if(typeof status !== 'boolean') {
                    _self.multiple = !_self.multiple;
                    if(_self.multiple) {
                        for(let option of _self.currentOptions) {
                            _self.$set(option, 'multChecked', option.checked);
                        }
                        _self.more = true;
                    }
                } else {
                    _self.multiple = status;
                    if(typeof more !== 'undefined') _self.more = more;
                    else if(!status) _self.more = false;
                }

            },
            /*多选显示控制*/
            toggleMore() {
                this.more = !this.more;
                if(!this.more) this.multiple = false;
            },
            /*区间变化*/
            sectionChange (event, status) {
                let val = /^\d+(\.\d{0,2})?|/.exec(event.target.value)[0];
                if(status === 1 && val < this.currentOptions[0]) {
                    this.$set(this.currentOptions, status, '');
                    return event.target.value = '';
                }
                val = /\.$/.test(val)? val.replace('.', '') : val;
                event.target.value = val;
                this.$set(this.currentOptions, status, val);
            },
            /*区间确定*/
            sectionConfirm () {
                this.$emit('confirm', this.code, this.currentOptions);
            }
        }
    }
</script>
<style type="text/less" lang="less">
    @font-light-black: #575757;
    @font-black: #333;
    @orange: #fd6442;
    @orange-pink: #fee9e4;
    @border-color: #DCDCDC;
    @divide-color: #666;
    @section-font-color: #666;
    .ff-screen {
        border-bottom: 1px #DFDFDF dashed;
        font-size: 12px;
        position: relative;
        text-align: left;
        display: flex;
        .ff-screen-title {
            color: @font-light-black;
            height: 46px;
            line-height: 50px;
            text-indent: 20px;
            width: 100px;
        }
        .ff-screen-options {
            color: @font-black;
            padding: 12px 0;
            position: relative;
            width: calc(~"100% - 100px");
            .ff-screen-options-list {
                margin-right: 350px;
                ul {
                    min-height: 22px;
                    overflow: hidden;
                    li {
                        float: left;
                        height: 22px;
                        line-height: 22px;
                        margin-bottom: 8px;
                        margin-right: 6px;
                        min-width: 48px;
                        text-align: center;
                        label {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 2px 12px;
                            input {
                                margin-right: 4px;
                            }
                        }
                    }
                }
                .ff-screen-bottom-button{
                    margin-top: 4px;
                    text-align: center;
                    .ff-screen-bottom-btn {
                        margin: 0 10px;
                        display: inline-block;
                        line-height: 1;
                        white-space: nowrap;
                        text-align: center;
                        box-sizing: border-box;
                        outline: none;
                        transition: .1s;
                        border: 1px solid #dcdfe6;
                        padding: 6px 10px;
                        border-radius: 4px;
                        cursor: pointer;
                        font-weight: 500;
                        &:first-child {
                            color: #fff;
                            border-color: @orange;
                            background-color: @orange;
                            &:hover {
                                color: #fff;
                                border-color: @orange;
                                background-color: @orange;
                                opacity: .8;
                            }
                        }
                        &:last-child {
                            color: @orange;
                            border-color: @orange;
                            background-color: #fff;
                            &:hover {
                                background-color: @orange-pink;
                                opacity: .8;
                            }
                        }
                    }
                }
                &.options-list-fixed {
                    ul {
                        height: 26px;
                    }
                }
                &.options-list-more {

                }
                &.options-list-radio {
                    ul {
                        li {
                            label.ff-screen-checked {
                                background-color: @orange;
                                border-radius: 4px;
                                color: #fff;
                            }
                        }
                    }
                }
                &.options-list-multiple {

                }
            }
            .ff-screen-operate-btn {
                height: 46px;
                line-height: 46px;
                position: absolute;
                right: 0;
                text-align: right;
                top: 0;
                width: 178px;
                span {
                    width: 60px;
                    border-radius: 4px;
                    cursor: pointer;
                    display: inline-block;
                    height: 24px;
                    line-height: 22px;
                    margin-right: 20px;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid @border-color;
                    &:hover {
                        color: @orange;
                        border-color: @orange;
                    }
                }
            }
        }
        &.ff-screen-more {
            height: auto;
        }
        .ff-screen-section {
            display: flex;
            align-items: center;
            color: @font-black;
            padding: 12px 0;
            position: relative;
            width: calc(~"100% - 100px");
            .ff-screen-section--box {
                width: 122px;
                height: 38px;
                box-sizing: border-box;
                border: 1px solid @border-color;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: @section-font-color;
            }
            .ff-screen-section-divide {
                display: inline-block;
                width: 24px;
                height: 1px;
                background-color: @divide-color;
                margin: 0 3px;
            }
            .ff-screen-section-input {
                width: 80px;
                height: 30px;
                border: none;
                margin-left: 4px;
                color: @section-font-color;
            }
            .ff-screen-bottom-btn {
                margin: 0 10px;
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                text-align: center;
                box-sizing: border-box;
                outline: none;
                transition: .1s;
                border: 1px solid @orange;
                padding: 6px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-weight: 500;
                color: #fff;
                background-color: @orange;
                &:hover {
                    opacity: .8;
                }
            }
        }
    }
    .ff-screen-no-border {
        border-bottom: none;
        align-items: center;
        .ff-screen-section-title {
            line-height: 46px;
        }
    }
</style>


